export default {
  props: {
    isInline: {
      type: Boolean,
      default: false
    },
    tabTop: {
      type: [Number, String],
      default: 44
    },
    tabLeft: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      tabList: [],
      confId: '',
      list: [],
      finished: false, // 列表是否加载完成
      imgHost: process.env.VUE_APP_STATIC,
      scrollBottom: 0, // 滚动距离底部距离
      scrollTop: 0, // 滚动顶部距离
      touchFun: null
    }
  },
  computed: {
    activeTabIndex() {
      const index = this.tabList.findIndex(v => v.id === this.confId)
      return index
    },
    tabName() {
      const obj = this.tabList[this.activeTabIndex]
      return (obj && obj.name) || ''
    },
    finishedText() {
      return this.activeTabIndex === this.tabList.length - 1 ? '没有更多啦' : '上滑查看更多'
    },
    refreshDisabled() {
      return this.activeTabIndex !== 0
    }
  },
  watch: {
    confId(v) {
      this.resetPageData()
    }
  },

  created() {
    this.getTabList()
  },
  activated() {
    this.resetPageData()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.touchFun = this.$touch(this.touchHandle, this)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
    this.touchFun()
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    resetData() {
      this.list = []
    },
    handleScroll() {
      // 变量 scrollHeight 是滚动条的总高度
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      // 变量 windowHeight 是可视区的高度
      const windowHeight = document.documentElement.clientHeight || document.body.clientHeight

      // 变量scrollTop为当前页面的滚动条纵坐标位置
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 滚动条到底部得距离 = 滚动条的总高度 - 可视区的高度 - 当前页面的滚动条纵坐标位置
      var scrollBottom = scrollHeight - windowHeight - scrollTop
      this.scrollBottom = scrollBottom
      this.scrollTop = scrollTop
      // console.log(scrollBottom, 'scrollBottom')
    },
    touchHandle(x, y) {
      // 左滑 x<0,右滑：x>0，上滑y<0,下滑y>0
      // console.log(x, y, this.scrollTop, this.scrollBottom, this.finished)
      if (this.scrollTop < 1 && (y && y > 100)) {
        this.toPrevTabPage()
        return
      }
      if ((y && y < -100) && this.scrollBottom < 1 && this.finished) {
        this.toNextTabPage()
      }
      /* if (Math.abs(x || 0) > 20 && Math.abs(y || 0) < 20) {
        // console.log('x>20,y<20')
      } else if (y !== undefined) {

      } */
    },
    toNextTabPage() {
      if (this.activeTabIndex === this.tabList.length - 1) {
        return
      }
      this.confId = this.tabList[this.activeTabIndex + 1].id
    },
    toPrevTabPage() {
      if (this.activeTabIndex === 0) {
        return
      }
      this.confId = this.tabList[this.activeTabIndex - 1].id
    }
  }
}
